<template>
	<view class="container">
		<view class="votebox">
			<view class="voteitem bgWhite radius5 plr15 ">
				<view class="title justify-between align-center">
					<view class="">
						{{dataInfo.title}}
					</view>
					<text class="status">{{dataInfo.status==1?'进行中':dataInfo.status==2?'本次投票已结束':'待开始' }}</text>
				</view>
				
				<view class="mt5">{{dataInfo.content}}				</view>
				<view class="joininfo align-center justify-between">
					<text>投票范围: {{dataInfo.scopeName}}</text>
					<view class="align-center share">
						<image src="/static/images/share2.png" mode=""></image>分享
					</view>
				</view>
				<!-- <view  class="statusbtn">
						{{dataInfo.status==1?'进行中':dataInfo.status==2?'本次投票已结束':'待开始' }}
				</view> -->
				<view v-if="dataInfo.status==1" class="justify-between align-center mt20 mb20 resulttab">
					<view class="" :class="result==1?'act':''" @click="result=1">
						赞成
					</view>
					<view class="" :class="result==2?'act':''" @click="result=2">
						反对
					</view>
					<view class="" :class="result==3?'act':''" @click="result=3">
						弃权
					</view>
				</view>
				<view class="tp statusbtn" @click="tp" v-if="dataInfo.status==1">
					投票
				</view>
			</view>
			<view class="voteitem bgWhite radius5 plr15 mt15 ">
				<view class="justify-between align-center mb20">
					
					<view class="flex-col align-center flex1 justify-center">
						<text class="num">{{dataInfo.houseHold||0}}</text>
						<text class="numdesc">业主户数</text>
					</view>
					
					<view class="flex-col align-center middle flex1 justify-center">
						<text class="num">{{dataInfo.num||0}}</text>
						<text class="numdesc">投票人数</text>
					</view>
					<view class="flex-col align-center flex1 justify-center">
						<text class="num">{{dataInfo.view||0}}</text>
						<text class="numdesc">浏览次数</text>
					</view>
				</view>
			
				<view class="timedata  ">
					<view class="ml12">
						开始时间: {{dataInfo.starttime}}
					</view>
					<view class="ml12">
						截止时间: {{dataInfo.endtime}}
					</view>
				</view>
			</view>
			<view class="voteitem bgWhite radius5 plr15 mt15 ">
				<view class="resultTitle mb10">
					投票结果
				</view>
				<view class="justify-between align-center mb20 resulttab">
					<view class="" :class="act==1?'act':''" @click="changeAct(1)">
						赞成({{dataInfo.successCount}})
					</view>
					<view class="" :class="act==2?'act':''" @click="changeAct(2)">
						反对({{dataInfo.failCount}})
					</view>
					<view class="" :class="act==3?'act':''" @click="changeAct(3)">
						弃权({{dataInfo.cancelCount}})
					</view>
				</view>
				<view class="allcount">
					占专有面积 28374.46 ㎡
				</view>
				<view class="">
					<view v-for="(item,index) in resultList" :key="index" class="list justify-between align-center mb15" style="color: #010101;font-size: 25rpx;" >
						<view class="">
							<text class="mr10">{{item.userInfo.name}} </text>
							<text>{{item.userInfo.area}}㎡ </text>
							                 
						</view>
						<view class="flex1 justify-end">
							{{formatDateTime(item.createtime)}}
						</view>
					</view>
				</view>
			</view>
		</view>
	
		
		
		
		
		
		<uv-popup ref="popup" :close-on-click-overlay="true" bgColor="" mode="center" round="15">
			<view class="popcontent">
				<image src="../../static/images/hongbao.png" mode=""></image>	
			</view>
						
		</uv-popup>
		
	</view>
</template>

<script>
	
	import  {formatDate} from "../../utils/utils"
	export default {
		components: {
		
		},
		 onShareAppMessage() {
		    return {
		      title: '',
		      path: '/pages/voteResult/index?id='+this.id,
		      imageUrl: ''
		    };
		  },
		  // 如果需要分享到朋友圈（微信小程序）
		  onShareTimeline() {
		    return {
		      title: '',
		      query: '',
		      imageUrl: ''
		    };
		  },
		data() {
			return {
				act: 1,
				dataInfo:{},
				certificateNum:'',
				datalist:[],
				page:1,
				id:"",
				result:1,
				resultList:[]
			}
		},
		onLoad(opt) {
			if(opt.id) this.id=opt.id
			this.page=1;
			this.getMain()
			this.getResult()
		
		},
		
		mounted() {
			// this.$refs.popup.open()
		
		},
		onReachBottom() {
			this.page++;
			
		},
		methods: {
		 formatDateTime (inputTime){
				if(inputTime.toString().length<13){
					inputTime = Number(inputTime)*1000
				}
			    var date = new Date(Number(inputTime));  //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			    var y = date.getFullYear();    
			    var m = date.getMonth() + 1;    
			    m = m < 10 ? ('0' + m) : m;    
			    var d = date.getDate();    
			    d = d < 10 ? ('0' + d) : d;    
			    var h = date.getHours();  
			    h = h < 10 ? ('0' + h) : h;  
			    var minute = date.getMinutes();  
			    var second = date.getSeconds();  
			    minute = minute < 10 ? ('0' + minute) : minute;    
			    second = second < 10 ? ('0' + second) : second;   
			    return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;    
			},
			 shareToTimeline() {
			    // 微信小程序分享到朋友圈
			    uni.share({
			      provider: 'weixin',
			      scene: 'WXSceneSession', // 分享到朋友圈
			      type: 0,
			      title: '',
			      imageUrl: '',
			      success: (res) => {
			        console.log('分享成功:', res);
			      },
			      fail: (err) => {
			        console.log('分享失败:', err);
			      }
			    });
			  },
			getMain(){
				this.$api.infoDetail({id:this.id}).then(res=>{
					console.log(res)
					this.dataInfo=res.data
				})
			},
			async getResult(){
				const data = await	this.$api.voteResult({id:this.id,status:this.act})
				console.log(data)
				this.resultList =data.data
				
			},
			changeAct(val){
				this.act= val
				this.getResult()
			},
			tp(){
					
				this.$api.submitVote({
						status:this.result,
						id:this.id,
						userId:uni.getStorageSync('userInfo').id
				}).then(res=>{
					console.log(res)
					if(res.code==1){
						uni.showToast({
							title:'投票成功'
						})
						this.getMain()
						this.getResult()
						this.$refs.popup.open()
					} else if(res.code==400401){
						uni.showModal({
							title:'提示',
							content:'未实名认证，请选实名认证',
							success:function(res){
								if(res.confirm){
									uni.navigateTo({
										url:'/pages/realName/index'
									})
								}
							}
						})
					} else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
		}





	}
</script>
<style scoped lang="scss">
	.container {
		height: 100vh;
		
		
	}
	.votebox{
		padding: 36rpx 30rpx;
	}
	.voteitem{
		padding-top: 40rpx;
		padding-bottom: 30rpx;
		font-size: 28rpx;
		color: #9B9BA2;
		.title{
			
			view{
				font-weight: 800;
				font-size: 32rpx;
				color: #000000;
			}
			.status{
				font-weight: 500;
				font-size: 26rpx;
				color: #2AB70E;
			}
			
		}
		.joininfo{
			margin-top: 30rpx;
			// border-top: 1px solid rgba(217, 215, 218, .3);
			
			image{
				width: 26rpx;
				height: 26rpx;
			}
			
		}
	}
	.popcontent{
		position: relative;
		width: 698rpx;
		height: 910rpx;
		image{
			position: absolute;
			width: 698rpx;
			height: 910rpx;
		}
	}
		
	.statusbtn{
		width: 100%;
		height: 93rpx;
		margin-top: 40rpx;
		background: #3E59F2;
		line-height: 93rpx;
		font-weight: bold;
		text-align: center;
		font-size: 24rpx;
		color: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}
		
	.timedata{
		// height: 82rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #9B9BA2;
		line-height: 40rpx;
		background: #F8F8F8;
		padding:  24rpx;
	}
	.num{
		font-weight: 500;
		font-size: 36rpx;
		color: #1C1C1C;
	}
	.numdesc{
		font-weight: 500;
		font-size: 24rpx;
		color: #9B9BA2;
	}
		
	.middle{
		position: relative;
	}
	.middle::before{
			clear: both;
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 4rpx;
			height: 39rpx;
			background: #F8F8F8;
			left: 0;
	}
	.middle::after{
		clear: both;
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 4rpx;
		height: 39rpx;
		background: #F8F8F8;
		right: 0;
	}
	.resultTitle{
	font-weight: bold;
font-size: 30rpx;
color: #010101;
	}
	.resulttab{
		view{
			width: 200rpx;
			height: 78rpx;
			color: #3E59F2;
			background: rgba(62, 89, 242, .1);
			border-radius: 10rpx;
			font-weight: bold;
			font-size: 25rpx;
			text-align: center;
			line-height: 78rpx;
		}
		.act{
			background: #3E59F2;
			color: #fff;
		}
	}
	.allcount{
		color: #FB5E08;
		font-weight: bold;
		font-size: 25rpx;
		margin: 35rpx 0;
	}
</style>